<template>
  <div class="weekly-list">
    <!-- 个人周报管理 -->
    <el-card class="mb-20">
      <template #header>
        <div class="card-header">
          <span>我的周报</span>
          <el-button type="primary" @click="showAddWeeklyForm">新增周报</el-button>
        </div>
      </template>

      <el-table :data="myWeeklys" style="width: 100%" border stripe>
        <el-table-column prop="reportTitle" label="周报标题" width="200" />
        <el-table-column prop="reportContent" label="周报内容" show-overflow-tooltip />
        <el-table-column prop="submitTime" label="提交时间" width="180" />
        <el-table-column label="操作" width="150" fixed="right">
          <template #default="scope">
            <el-button type="primary" link @click="editWeekly(scope.row)">编辑</el-button>
            <el-button type="danger" link @click="deleteWeekly(scope.row.reportID)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 所有周报查看 -->
    <el-card>
      <template #header>
        <div class="card-header">
          <span>周报查看</span>
        </div>
      </template>

      <!-- 搜索框 -->
      <div class="search-section">
        <el-form :inline="true" class="search-form">
          <el-form-item label="周报标题">
            <el-input v-model="searchTitle" placeholder="请输入周报标题" />
          </el-form-item>
          <el-form-item label="作者">
            <el-input v-model="searchAuthor" placeholder="请输入作者姓名" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">查询</el-button>
            <el-button @click="resetSearch">重置</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 周报列表 -->
      <el-table :data="allWeeklys" style="width: 100%" border stripe>
        <el-table-column prop="username" label="作者" width="120" />
        <el-table-column prop="reportTitle" label="周报标题" width="200" />
        <el-table-column prop="reportContent" label="周报内容" show-overflow-tooltip />
        <el-table-column prop="submitTime" label="提交时间" width="180" />
        <el-table-column label="操作" width="100" fixed="right">
          <template #default="scope">
            <el-button type="primary" link @click="viewWeekly(scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 新增/编辑周报弹窗 -->
    <el-dialog
      :title="selectedWeekly ? '编辑周报' : '新增周报'"
      v-model="showForm"
      width="50%"
    >
      <WeeklyForm
        :weekly="selectedWeekly"
        @close="closeForm"
        @save="fetchMyWeeklys"
      />
    </el-dialog>

    <!-- 查看周报详情弹窗 -->
    <el-dialog
      title="周报详情"
      v-model="showDetailDialog"
      width="50%"
    >
      <div class="weekly-detail" v-if="currentWeekly">
        <h3>{{ currentWeekly.reportTitle }}</h3>
        <div class="weekly-meta">
          <span>作者：{{ currentWeekly.username }}</span>
          <span>提交时间：{{ currentWeekly.submitTime }}</span>
        </div>
        <div class="weekly-content">
          {{ currentWeekly.reportContent }}
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import WeeklyForm from './WeeklyForm.vue'

export default {
  name: 'MemberWeekly',
  components: { WeeklyForm },
  data() {
    return {
      myWeeklys: [], // 我的周报列表
      allWeeklys: [], // 所有周报列表
      showForm: false,
      showDetailDialog: false,
      selectedWeekly: null,
      currentWeekly: null,
      searchTitle: '',
      searchAuthor: '',
      currentPage: 1,
      pageSize: 10,
      total: 0,
      // 模拟数据
      currentUsername: '张三' // 当前登录用户
    }
  },
  methods: {
    // 获取个人周报列表
    fetchMyWeeklys() {
      // 模拟数据
      this.myWeeklys = [
        {
          reportID: 1,
          reportTitle: '第一周工作总结',
          reportContent: '本周完成了项目初始化...',
          submitTime: '2024-03-18 10:00:00'
        }
      ]
    },
    // 获取所有周报列表
    fetchAllWeeklys() {
      // 模拟数据
      this.allWeeklys = [
        {
          reportID: 1,
          username: '张三',
          reportTitle: '第一周工作总结',
          reportContent: '本周完成了项目初始化...',
          submitTime: '2024-03-18 10:00:00'
        },
        {
          reportID: 2,
          username: '李四',
          reportTitle: '项目进度报告',
          reportContent: '完成了数据库设计...',
          submitTime: '2024-03-18 11:00:00'
        }
      ]
      this.total = this.allWeeklys.length
    },
    handleSearch() {
      // 实现搜索逻辑
      this.$message.success('搜索成功')
    },
    resetSearch() {
      this.searchTitle = ''
      this.searchAuthor = ''
      this.fetchAllWeeklys()
    },
    showAddWeeklyForm() {
      this.selectedWeekly = null
      this.showForm = true
    },
    editWeekly(weekly) {
      this.selectedWeekly = { ...weekly }
      this.showForm = true
    },
    deleteWeekly(reportID) {
      this.$confirm('确认删除该周报吗？', '提示', {
        type: 'warning'
      }).then(() => {
        this.$message.success('删除成功')
        this.fetchMyWeeklys()
      })
    },
    viewWeekly(weekly) {
      this.currentWeekly = weekly
      this.showDetailDialog = true
    },
    closeForm() {
      this.showForm = false
      this.selectedWeekly = null
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.fetchAllWeeklys()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.fetchAllWeeklys()
    }
  },
  mounted() {
    this.fetchMyWeeklys()
    this.fetchAllWeeklys()
  }
}
</script>

<style scoped>
.weekly-list {
  padding: 20px;
}

.mb-20 {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search-section {
  margin-bottom: 20px;
  padding: 18px 0;
}

.search-form {
  display: flex;
  align-items: center;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

.weekly-detail {
  padding: 20px;
}

.weekly-meta {
  margin: 10px 0;
  color: #666;
  display: flex;
  gap: 20px;
}

.weekly-content {
  margin-top: 20px;
  white-space: pre-wrap;
  line-height: 1.6;
}
</style> 